<script setup lang="ts">
  import {ref} from "vue"

  const layoutBack = ref([
    { x: 0, y: 0, w: 1, h: 1, i: "0" },
    { x: 1, y: 0, w: 1, h: 1, i: "1" },
    { x: 2, y: 0, w: 1, h: 1, i: "2" },
    { x: 3, y: 0, w: 1, h: 1, i: "3" },
    { x: 4, y: 0, w: 1, h: 1, i: "4" },

    { x: 0, y: 1, w: 1, h: 1, i: "10" },
    { x: 1, y: 1, w: 1, h: 1, i: "11" },
    { x: 2, y: 1, w: 1, h: 1, i: "12" },
    { x: 3, y: 1, w: 1, h: 1, i: "13" },
    { x: 4, y: 1, w: 1, h: 1, i: "14" },

    { x: 0, y: 2, w: 1, h: 1, i: "20" },
    { x: 1, y: 2, w: 1, h: 1, i: "21" },
    { x: 2, y: 2, w: 1, h: 1, i: "22" },
    { x: 3, y: 2, w: 1, h: 1, i: "23" },
    { x: 4, y: 2, w: 1, h: 1, i: "24" }
    
  ])
  const layoutList = ref([
    { x: 0, y: 0, w: 1, h: 1, i: "drag" },
  ])

  const movedEvent = (e, newX, newY) => {
    console.log("MOVED e=" + e + ", X=" + newX + ", Y=" + newY)
  }

  const itemBoxRef = ref()
  const dragend = (e) => {
    let { clientX, clientY } = e
    // 不要大于整个容器高度
    if (clientY > 430) {
      return false
    }
    // +10px margin
    const itemWidth = itemBoxRef.value[0].offsetWidth + 10
    const itemHeight = itemBoxRef.value[0].offsetHeight
    // 移动的距离/grid-item宽度 = 第几个 向上取整
    const gx = Math.ceil(clientX/itemWidth)
    const gy = Math.ceil(clientY/itemHeight)
    layoutList.value.push({
      x: gx - 1,
      y: gy - 1,
      w: 1,
      h: 1,
      i: `x:${gx},y:${gy},${Math.random()}`,
    })
    console.log("layoutList", layoutList.value)
  }
  const closeItem = (item) => {
    console.log(item)
    const closeIdx = layoutList.value.findIndex(i => {
      return item.i === i.i
    })
    layoutList.value.splice( closeIdx, 1)
  }
</script>

<template>
  <div class="main-box">
    <grid-layout
      class="layoutBox"
      v-model:layout="layoutList"
      :col-num="20"
      :row-height="100"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="false"
      :margin="[10, 10]"
      :use-css-transforms="false"
      :style="{ height: '100%' }"
      :auto-size="false"
      :is-bounded="true"
    >

      <grid-item
        v-for="item in layoutBack"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :is-draggable="false"
        :is-resizable="false"
        @moved="movedEvent"
      >
        <div class="grid-item-bak">
          {{item.i}}
        </div>
      </grid-item>

      <grid-item
        v-for="item in layoutList"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :is-draggable="true"
        :is-resizable="true"
        max-w="3"
        max-h="2"
        @moved="movedEvent"
      >
        <div class="item-box" ref="itemBoxRef">
          <span style="word-wrap: break-word;">{{item.i}}</span>
          <div class="close" @click="closeItem(item)">X</div>
        </div>
      </grid-item>
    </grid-layout>
  </div>
  <div class="addBox" @dragend="dragend" draggable="true" unselectable="on">
    Droppable Element (Drag me!)
  </div>

</template>

<style scoped>
  .main-box {
    width: 100%;
    height: 450px;
    overflow: hidden;
  }
  .layoutBox {
    border: 1px solid #2574ce;
  }
  .layoutBox::before {
    content: '';
    background-size: calc(calc(100% - 5px) / 20) 110px;
    background-image: linear-gradient(
      to right,
      lightgrey 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
    height: calc(100% - 5px);
    width: calc(100% - 5px);
    position: absolute;
    background-repeat: repeat;
    margin: 5px;
  }
  .item-box {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #c54949;
    border: 1px solid #2b0700;
    .close {
      position: absolute;
      right: 6px;
      top: 6px;
      cursor: pointer;
    }
  }
  .grid-item-bak {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #eee;
    border: 1px solid #2b0700;
  }
  .addBox {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #ab6737;
    cursor: move;
  }

</style>